<template>
	<view class="wrap">
		<view class="export-card">
			<view class="search">
				<u-search v-model="keywords" @custom="search" @search="search"></u-search>
			</view>
			<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
			<view v-if="current == 0" class="collapse-list">
				<u-collapse>
					<u-collapse-item class="collapse-container">
						<view slot="title">
							<u-section title="总发行" line-color="#4f77ed" :right="false" :show-line="false" font-size="30"></u-section>
						</view>
						<view>
							<view class="collapse-item">
								<u-avatar class="user-images" :size="70"></u-avatar>
								<view class="user-record">
									<view class="user-info">
										<view class="user-name">杨过</view>
										<view class="user-time">2024年7月28日 23:01</view>
									</view>
									<view class="user-integral">+2</view>
								</view>
							</view>
							<u-divider half-width="300" :use-slot="false"/>
						</view>
						<view>
							<view class="collapse-item">
								<u-avatar class="user-images" :size="70"></u-avatar>
								<view class="user-record">
									<view class="user-info">
										<view class="user-name">郭靖</view>
										<view class="user-time">2024年7月28日 23:01</view>
									</view>
									<view class="user-integral">+2</view>
								</view>
							</view>
							<u-divider half-width="300" :use-slot="false"/>
						</view>
						<view>
							<view class="collapse-item">
								<u-avatar class="user-images" :size="70"></u-avatar>
								<view class="user-record">
									<view class="user-info">
										<view class="user-name">黄蓉</view>
										<view class="user-time">2024年7月29日 23:01</view>
									</view>
									<view class="user-integral">+1</view>
								</view>
							</view>
							<u-divider half-width="300" :use-slot="false"/>
						</view>
					</u-collapse-item>
					<u-collapse-item class="collapse-container" title="今日积分发行">
						<view slot="title">
							<u-section title="今日积分发行" line-color="#4f77ed" :right="false" :show-line="false" font-size="30"></u-section>
						</view>
					</u-collapse-item>
					<u-collapse-item class="collapse-container" title="近一周积分发行">
						<view slot="title">
							<u-section title="近一周积分发行" line-color="#4f77ed" :right="false" :show-line="false" font-size="30"></u-section>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
			
			<view v-if="current == 1">
				<u-index-list :scrollTop="scrollTop">
					<view class="personal-listitem" v-for="(items, idx) in indexList" :key="idx" :use-slot="true">
						<u-index-anchor :index="items" />
						<view class="list-cell" v-for="(item, index) in getRandomInt(1,3)" :key="index"
							@click="navTo('/pages/sys/book/personal-details')">
							<u-avatar class="user-images" :src="getReandomImage(index)"></u-avatar>
							<view class="user-name"><span>{{nameList[index]}}</span><span
									class="user-other">{{deptList[index]}}</span></view>
						</view>
					</view>
				</u-index-list>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keywords: '',
			tabList: [
				{
					name: '积分统计'
				}, 
				{
					name: '积分录入',
				}
			],
			current: 0,
			scrollTop: 0,
			indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
				"T", "U",
				"V", "W", "X", "Y", "Z"
			],
			nameList: ['林逸飞', '李晨曦', '白飞', '百威',],
			deptList: ['勤工俭学', '读者协会', '志愿者协会'],
			imageList: ['user01', 'user02', 'user03', 'user04', 'user05', 'user06'],
		}
	},
	methods: {
		changeTab(index) {
			this.current = index;
		},
		search(value) {
			this.$u.toast('搜索内容为：' + value)
		},
		getRandomInt(min, max) {
			let data = Math.floor(Math.random() * (max - min + 1)) + min;
			return data;
		},
		getReandomImage(i) {
			// return '/static/aidex/images/' + this.imageList[i] + '.png';
			return;
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
	}
}
</script>

<style lang="scss">
@import 'index.scss';
page {
	background-color: #f5f5f5;
}

.search{
	padding: 20rpx 20rpx 0;
	background: #f8f8f8;
	height: 105rpx;
}

.collapse-list {
	background-color: #fff
}

.collapse-container {
	margin: 30rpx;
	padding-top: 30rpx;
	padding-bottom: 30rpx;
}

/deep/ .u-collapse-title {
	line-height: 40rpx;
}

.collapse-item {
	display: flex;
	flex-direction: row;
}

.user-images {
	margin: 20rpx;
}

.user-record {
	width: 100%;
	margin: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	.user-info {
		
		
		.user-name {
			color: #000;
		}
		
		.user-time {
		}
	}
	

	
	.user-integral {
		color: #58ca93;
	}
}

.personal-listitem .list-cell:last-of-type {
	border-bottom: 0 !important;
}

.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 8px 24rpx;
	overflow: hidden;
	color: #323233;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
	align-items: center;
	border-bottom: 1px solid #ececec !important;
}

.user-name {
	font-size: 32rpx;
	color: #000000;
	flex: 1;

	span {
		display: block;
	}

	.user-other {
		font-size: 26rpx;
		color: #999999;
		font-weight: normal;
	}
}
</style>